
<script setup>
// 1 导入ref
import { ref } from "vue";

// 2 定义响应式数据 并给默认值
const task = ref("");
// 只要按了enter键触发
const downFn = () => {
  console.log(task.value);
};
// 点击事件触发
const fn = () => {
  console.log(task.value);
};
</script>

<template>
  <!-- 模板中使用数 直接变量名 -->
  <!--  keydown 键盘谈起   -->
  <!-- .enter 键盘修饰符  -->
  <input
    @keydown.enter="downFn"
    v-model="task"
    class="new-todo"
    placeholder="输入任务名称-回车确认"
    autofocus
  />
  <!-- @click 点击事件 -->
  <button @click="fn">按钮</button>
</template>
<style    scoped></style>